<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>饭店POS系统</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/admin.css" />
<script src="js/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="top">
	<div class="container-fluid head">
		<div class="row">
				<nav class="navbar navbar-inverse ">
  <div class="container-fluid">

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
      <li><a href="index.html">菜式管理</a></li>
        <li><a href="category.html">菜式类别管理</a></li>
        <li><a href="">顾客信息管理</a></li>
        <li><a href="">分类管理</a></li>
        <li class="active"><a href="">订单管理 <span class="sr-only">(current)</span></a></li>
        <li><a href="">留言管理</a></li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">确定</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" >用户 <span class="caret"></span></a>
          <ul class="dropdown-menu" >
            
            <li><a href="">退出登录</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
		</div>
	</div>
</div>
<div class="container-fluid" id="mainContainer">
	<div class="row">
		
			<div class="pull-left col-md-3 left">
			<ul class="list-group">
        <li class="list-group-item">菜式管理
          <ul class="list-group">
            <li class="list-group-item">
            <button type="button" class="btn btn-primary" 
            	data-toggle="modal" data-target="#editModal" onClick="add()">开单</button>
            </li>
          </ul>
        </li>
      </ul>
			</div>
			<div class="pull-right col-md-9 right">
			<table class="table table-striped table-hover">
      <thead>
      <tr>
        <th>单号</th>
        <th>消费金额</th>
        <th>开单时间</th>
        <th>结单时间</th>
        <th>备注</th>
      </tr>
      </thead>
      <tbody id="tbody">
      </tbody>
    <tfoot>
    <tr>
      <th colspan="6"></th>
    </tr>
    </tfoot>
    </table>
			</div>
		
	</div>
</div>
<!-- 编辑弹出框 -->
            <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑框</h4>
                  </div>
                  <div class="modal-body">
                    <div hidden="hidden" class="form-group">
					<label for="billId">点单ID</label>
                        <input name="billId" type="text" class="form-control" 
                        id="billId" placeholder="" value="">
                </div>
				<div class="form-group">
					<label for="billNumber">单号</label>
                          <input name="billNumber" type="text" class="form-control" 
                          id="billNumber" placeholder="" value="">
				</div>
				<div class="form-group">
					<label for="createBillTime">开单时间</label>
                          <input name="createBillTime" type="text" disabled
                          class="form-control" id="createBillTime" placeholder="" value="">
				</div>
				<div class="form-group">
					<label for="finishBillTime">结单时间</label>
                          <input name="finishBillTime" type="text" disabled
                          class="form-control" id="finishBillTime" placeholder="" value="">
				</div>
				<div class="form-group">
                    <table id="tab" class="table table-striped table-bordered table-hover table-condensed">
                         <thead>
      						<tr>
         						<th>菜式名称</th>
         						<th>时下价格</th>
         						<th>数量</th>
      						</tr>
   						</thead>
                        <tbody id="tbDish"></tbody>
					</table> 
					<p><label>消费金额：</label><label id="consumption"></label></p>  
                </div>
				<div class="form-group">
					<label for="description">备注</label>
                          <input name="description" type="text" class="form-control" 
                          id="description" placeholder="" value="">
				</div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" 
                    id="submit" onClick="submit()">确认</button>
                  </div>
                </div>
              </div>
            </div>
            <!--编辑弹出框结束-->
<div class="bottom">
	<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <div class="img"></div>
		<div class="foot-text"><span>CopyRight by CHHLZ</span></div>
  </div>
</nav>
</div>
</body>
<script>
var rows;
var editOrAdd = true;

var bill = {
		billId: document.getElementById("billId"),
		billNumber: document.getElementById("billNumber"),
		createBillTime: document.getElementById("createBillTime"),
		finishBillTime: document.getElementById("finishBillTime"),
		consumption: document.getElementById("consumption"),
		description: document.getElementById("description")
};

$(document).ready(function(){
	loadDishes();
	loadBills();
});

var loadBills = function(){
	var tbody = document.getElementById("tbody");
	$("#tbody td").remove();
	$.post('bill!grid.action', function(data){
		//console.log('load bill: ' + data);
		data = JSON.parse(data);
		//console.log(data);
		rows = data['rows'];
		for(var i=0; i<rows.length; i++){
			var fbt = rows[i]['finishBillTime'];
			if(!fbt){
				fbt = '未结单';
			}
			var desc = rows[i]['description'];
			if(!desc){
				desc = '';
			}
			tbody.innerHTML += "<tr>" 
			+ "<td hidden='hidden'>" + rows[i]['billId'] + "</td>" 
			+ "<td>" + rows[i]['billNumber'] + "</td>" 
			+ "<td>" + rows[i]['consumption'] + "</td>" 
			+ "<td>" + rows[i]['createBillTime'] + "</td>" 
			+ "<td>" + fbt + "</td>" 
			+ "<td>" + desc + "</td>" 
			+ "<td><button type=\"button\" class=\"btn btn-primary\" "
			+ "data-toggle=\"modal\" data-target=\"#editModal\" onClick='edit("+ i +")'>编辑</button>"
			+ "<td><button type='button' class='btn btn-primary' "
			+ "data-toggle='modal' onClick='finish("+ i +")'>结单</button>"
			+ "<input type=\"submit\" class=\"btn btn-primary\" "
			+ "value='删除' onClick='del("+ rows[i]['billId'] +")'/></td>" 
			+ "</tr>";
		}
	});
}

var loadDishes = function(){
	$.post('dish!grid.action', function(data){
		data = JSON.parse(data);
		dishes = data['rows'];
		localStorage['dishes'] = JSON.stringify(dishes);
		var tDish = document.getElementById('tbDish');
		//console.log(tDish.innerHTML);
		for(var i=0; i<dishes.length; i++)	{
			tDish.innerHTML += 
				'<tr id="trDish'+ i +'"><td hidden="hidden">'
				+ '<input id="dishId'+ i +'" type="text" value="'+ dishes[i]['dishId'] +'" /></td>'
			+ '<td><span>' + dishes[i]['dishName'] +'</span></td>'
			+ '<td><span class="price">'+ dishes[i]['currentPrice'] +'</span></td>'
			+ '<td><input class="min" name="" type="button" value="-" /> '
			+ '<input id="amount'+ i +'" class="text_box" name="" disabled type="text" value="0" /> '
			+ '<input class="add" name="" type="button" value="+" /></td></tr> '
		}
		$("input.add").click(function(){ 
			var t=$(this).parent().find('input[class*=text_box]'); 
			t.val(parseInt(t.val())+1);
			setTotal(); 
		});
		$("input.min").click(function(){ 
			var t=$(this).parent().find('input[class*=text_box]'); 
			t.val(parseInt(t.val())-1);
			if(parseInt(t.val())<0){ 
				t.val(0); 
			} 
			setTotal(); 
		});
		setTotal();
	});
}

function setTotal(){ 
	var s=0; 
	$("#tbDish tr").each(function(){ 
		s+=parseInt($(this).find('input[class*=text_box]').val())
			*parseFloat($(this).find('span[class*=price]').text()); 
	}); 
	$("#consumption").html(s.toFixed(2)); 
} 

var add = function(){
	editOrAdd = false;
	$.post('bill!create.action', function(data){
		data = $.parseJSON(data);
		bill['billId'].value = data['id'];
		bill['billNumber'].value = data['num'];
		bill['createBillTime'].value = data['cre'];
	});
}

var edit = function(i){
	editOrAdd = true;
	row = rows[i];
	//console.log(row);
	bill['billId'].value = row['billId'];
	bill['billNumber'].value = row['billNumber'];
	bill['createBillTime'].value = row['createBillTime'];
	bill['finishBillTime'].value = row['finishBillTime'];
	$('#consumption').text(row['consumption']);
	bill['description'].value = row['description'];
}

var finish = function(i){
	editOrAdd = true;
	row = rows[i];
	$.post('/bill!finish.action',{
		id: row['billId']
	}, function(status){
		if(status){
			loadBills();
		}
	});
}

var del = function(id){
	$.post('bill!remove.action?bill.billId=' + id, function(status){
		if(status){
			loadBills();
		}
	});
}

var submit = function(){
	
	var url;
	if(editOrAdd){
		url = "bill!edit.action";
	} else {
		url = "bill!add.action";
	}
	
	var dishes = JSON.parse(localStorage['dishes']);
	var billId = bill['billId'].value;
	var ds = new Array();
	if(dishes){
		var j = 0;
		for(var i=0; i<dishes.length; i++){
			var amount = parseInt($('input#amount' + i).val());
			if(!amount || amount == 0){
				continue;
			}
			ds[j++] = {
					billId: billId,
					dishId: parseInt($('input#dishId' + i).val()),
					amount: amount
			}
			
			var uri = 'billDish!add.action?billDish.billId=' + ds[j-1]['billId'] 
					+ '&billDish.dishId=' + ds[j-1]['dishId']
					+ '&billDish.unitId=1'
					+ '&billDish.amount=' + ds[j-1]['amount'];
			$.post(uri, function(data){
				console.log('add bill dish, data: ' + data);
			});
		}
	}
	
	ds = JSON.stringify(ds);
	var cspt = $('#consumption').text();
	if(!cspt){
		cspt = "";
	}
	//console.log('bill dishes, dishes: ' + dishes.length);
	//console.log('bill dishes, ds: ' + ds.length + ', ' + typeof(ds) + ',\n' + ds);
	//url += '?bill.billId=' + billId + '&bill.consumption=' + cspt 
	//		+ '&bill.description=' + bill['description'].value + '&bill.dishes=' + ds;
	/*url += '?dishes=' + ds;
	
	$.post(url, function(status){
		if(status){
			loadBills();
		}
	});*/
}
</script>
</html>